<template>
	<view>
		<!-- #ifdef H5 -->
		<web-view :src="loadURL" style="height: 94%;"></web-view>
		<!-- #endif -->
		<view class="root">
			<!-- #ifdef APP-PLUS -->
			<progress v-show="percent <=99 " :percent="percent" active stroke-width="3" backgroundColor="#999" />
			<!-- #endif -->
			<view class="" style="display: flex;align-items: center;">

				<view style="width: 8%;">
					<u-icon :name="isCollection ? 'heart-fill': 'heart' " @click="Collection" color="#2979ff" size="38">
					</u-icon>
				</view>
				<view style="width:78%;">
					<u-input v-model="keyword" style="text-align: center;" />
				</view>
				<view style="width: 8%;">
					<u-icon name="arrow-left" color="#2979ff" size="38"></u-icon>
				</view>
				<view style="width: 8%;" @click="goHome">
					<u-icon name="arrow-right" color="#2979ff" size="38"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		setState,
		getState
	} from '@/store';
	export default {
		name: 'Chromium',
		data() {
			return {
				keyword: '',
				percent: 0,
				atPresent: '',
				isCollection: false,
				loadURL:''
			}
		},
		onLoad(inputdata) {
			console.log(inputdata)
			let CollectionList = getState('Chromium', 'CollectionList'), // 我的收藏
				newCollection = CollectionList.map(item => item.url),
				host = getState('Chromium', 'host'), // 历史记录
				debugging = getState('Chromium', 'debugging'), // 域名调试列表
				debugList = debugging.map(item => item.url),
				This = this;


			this.loadURL =  `https://www.baidu.com/s?wd=${inputdata.data}&utm_source=gold_browser_extension`
			// this.loadURL =`https://www.baidu.com/from=844b/s?word=${inputdata.data}&ts=6081907&t_kt=0&ie=utf-8&fm_kl=021394be2f&rsv_iqid=3774692016&rsv_t=2f4fZxliZEn2NiToETBoHH7cHv5h4treqgdn9wvewNDFTD9lWv0OUImUuQ&sa=ib&ms=1&rsv_pq=3774692016&rsv_sug4=4382&tj=1&inputT=2886&sugid=9961442233505278560&ss=100&bd_ck=0&ex_bp_rt=1`
						
			if (this.isApp) {

					// 设置当前为全屏
					plus.navigator.setFullscreen(true)

					// https://image.baidu.com/
	

// 					let url =
// 						`https://www.baidu.com/s?wd=${inputdata.data}
// &rsv_spt=1&f=1&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_btype=t&inputT=1298&rsv_t=9c489dS7jSH7Y8hQw3EzzyVQHPVhfQQddaJuz4Yk4ZwDMWb4g9HVl%2BgaPbVpZM8YSqVH&rsv_sug10=45&rsv_sug1=31&rsv_sug7=100&rsv_pq=bbc4faa80000031a&rsv_sug2=0&rsv_sug4=1985&rn=50`

		

					var embed = plus.webview.create('https://www.baidu.com/', 'selfsummer', {
						top: '0px',
						bottom: '40px',
						popGesture: true,
					});
					embed.show(); // 显示窗口

					var ws = plus.webview.currentWebview();

					//Webview窗口加载资源事件的回调函数
					embed.onLoadingResource = (event) => {
						var url = event.url;
						console.log('Webview窗口加载资源事件的回调函数', url);
					}

					//Webview窗口页面加载完成事件
					embed.onloaded = (e) => {

						const {
							origin,
							href
						} = embed.getURL();
						// 我的调试域名

						debugList.includes(origin) && embed.appendJsFile('./static/js/vconsole.min.js');
						embed.appendJsFile('./static/js/Adblock.js');


						// 监听窗口侧滑返回事件
						embed.addEventListener('popGesture', function(e) {
							poplog.innerText = 'popGesture: ' + e.type + ',' + e.result + ',' + e
								.progress;
						}, false);


						console.log("页面地址为：" + href, embed.getTitle(), embed.getTitleNViewSearchInputText());

						// 验证当前浏览地址是否是收藏地址
						newCollection.includes(href) ? (This.isCollection = true) : (This.isCollection = false)

						// 快捷方式创建
						plus.navigator.createShortcut({
							name: '百度',
							toast: 'selfsummerwebivew创建',
							force: true
						}, (event) => {
							var result = event.result; // 快捷方式是否已经存在，调用plus.navigator.hasShortcut方法时有效
							var sure = event.sure; // 是否确定创建桌面快捷方式成功,调用plus.navigator.createShortcut方法时有效
							console.log('plus.navigator.createShortcut', event);
						});

					};


					//监听窗口加载进度变化事件
					embed.addEventListener('progressChanged', function({
						progress,
						target: {
							id,
							onLoadingResource,
							onloaded,
							onDrag,
							onerror,
							onError,
							onloading
						}
					}) {

						const {
							origin,
							href
						} = embed.getURL();

						// progress可获取加载进度
						console.log('加载进度', progress);
						This.percent = progress;

						if (progress <= 20) {
							embed.appendJsFile('static/js/vconsole.min.js');
							embed.appendJsFile('static/js/Adblock.js');
						}

						// embed.evalJS(
						// 	`document.querySelectorAll('.ec-result-inner').forEach(item=>{item.offsetParent && item.offsetParent.remove()})`
						// )

						if (progress === 100) {
							
							This.keyword = embed.getTitle()
							This.atPresent = href
							console.log("页面地址为：" + href, embed.getTitle(), embed
								.getTitleNViewSearchInputText());

							// 添加历史记录
							setState('Chromium', 'host', [{
								url: href,
								name: embed.getTitle(),
								tiem: This.Public.GetData(),
							}, ...host]);

						}
						console.log('获取Webview窗口的收藏参数', ws.getFavoriteOptions())

					}, false);


					// 添加下拉刷新属性
					// embed.setPullToRefresh({
					// 	support: true,
					// 	height: '50px',
					// 	range: '200px',
					// 	contentdown: {
					// 		caption: '下拉可以刷新'
					// 	},
					// 	contentover: {
					// 		caption: '释放立即刷新'
					// 	},
					// 	contentrefresh: {
					// 		caption: '正在刷新...'
					// 	}
					// }, () => {
					// 	success(embed)
					// 	console.log('下拉刷新')
					// 	embed.loadURL(This.atPresent);
					// 	console.log('下拉刷新',This.percent)
					// // This.percent == 100 &&	embed.endPullToRefresh();
					// });


					embed.onDrag = (event) => {

						console.log('窗口Webview窗口滑动事件数据', event)
					}


					// 页面加载失败
					embed.onerror = (e) => {
						console.log('Webview页面加载失败', e);
					}


					embed.onError = (error) => {

						var code = error.code; // 错误编码
						var message = error.message; // 错误描述信息
						console.log('onErroronError', code, message);
					}


					//Webview窗口页面开始加载事件
					embed.onloading = (e) => {
						console.log('Webview窗口页面开始加载事件', e);
						Loading(e)
					};
					//设置Webview窗口的滑屏操作手势
					// 左滑显示新窗口
					embed.drag({
						direction: 'left',
						moveMode: 'followFinger'
					}, {
						view: 'newdrag',
						moveMode: 'follow'
					}, function(e) {
						console.log('左滑显示新窗口: ' + JSON.stringify(e));


						//查询Webview窗口是否可前进
						embed.canForward(function(e) {
							console.log("是否可前进：" + e.canForward);
							//前进到上次加载的页面
							embed.forward();
						});

					});
					// 右滑隐藏新窗口
					embed.drag({
						direction: 'right',
						moveMode: 'followFinger'
					}, {
						view: ws,
						moveMode: 'follow'
					}, function(e) {
						console.log('右滑隐藏新窗口: ' + JSON.stringify(e));

						//查询Webview窗口是否可后退
						embed.canBack(function(e) {
							console.log('是否可返回：' + e.canBack);
							
							e.canBack ? embed.back() :uni.navgitorBack();
							//后退
							embed.back();
							
						});
					});
			}
		},
		methods:{
				goHome() {
					uni.navigateTo({
						url: './Home',
					});
				},
				// 收藏
				Collection() {
			
				},
				clear() {
					this.keyword = '';
				},
				search(e) {
					console.log(e);
				},
				change(e) {
					console.log(e);
				},
		
		
		}

	}
</script>

<style>
	.root {
		position: fixed;
		width: 100%;
		bottom: 0;
	}

	.u-search {
		z-index: 99999999999;
	}
</style>
